<template>
    <div class="banner">
        <van-swipe width="auto" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in bannerList" :key="item.id">
                <img :src="item.imgUrl">
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
export default {
    data() {
        return {
            bannerList: [
                { id: 1, imgUrl: './images/goodsad1.png' },
                { id: 2, imgUrl: './images/goodsad2.png' },
                { id: 3, imgUrl: './images/goodsad3.png' },
                { id: 4, imgUrl: './images/goodsad4.png' },
                { id: 5, imgUrl: './images/goodsad5.png' }
            ]
        };
    },
}
</script>

<style lang="less" scoped>
.banner {
    max-width: 250px;
    margin: 0 auto 10px;
    border-radius: 10px;
    overflow: hidden;

    img {
        width: 100%;
    }
}
</style>